<template>
  <div class="section">
      <img src="image/Sort/16.jpg" alt="">
      <ul>
          <li v-for="(v,i) in dats" :key="i">
              <div class="li-left">
                  <img :src="v.img" alt="">
              </div>
              <div class="li-rigth">
                  <h1>{{v.title}}</h1>
                  <p>{{v.text}}</p>
                  <span><b>{{v.num1}}</b>{{v.num2}}</span> 
                  <a href="">马上抢</a>
              </div>
          </li>
      </ul>
      <div class="sectionA">
          <ul>
              <li v-for="(x,y) in arry" :key="y">
                  <img :src="x.img" alt="">
                  <h1>{{x.title}}</h1>
                  <p>{{x.text}}</p>
                  <span><b>{{x.num1}}</b>{{x.num2}}</span> 
                  <a href="">
                      <van-icon name="cart-o" />
                  </a>
              </li>
          </ul>
      </div>
      <img class="img1" src="image/Sort/17.jpg" alt="">
      <div class="img2">
          <img src="image/Sort/18.jpg" alt="">
      </div>
      <div class="bottom">
          <span><b>￥19.8</b>/份</span>
          <a href="">立刻购买</a>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        dats:Array,
        arry:Array
    }

}
</script>

<style scoped>
    .section{
        width: 100%;
        height: 100%;
        background-color: #f5ffe9;
    }
    .section>img{
        width: 100%;
    }
    .section>ul{
        width: 100%;
        height: 100%;
        background-color: #f5ffe9;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .section>ul>li{
        width: 90%;
        height: 1.325rem;
        background-color: white;
        display: flex;
        overflow: hidden;
        border-bottom: 1px solid #bababa;
    }
    .section>ul>li:nth-child(1){
        border-radius: 10px 10px 0 0;
    }
    .section>ul>li:last-child{
        border-radius:  0 0 10px 10px;
        border-bottom: none;
    }
    .li-left{
        width: 30%;
        height: 100%;
    }
    .li-left>img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
        padding: 0.05rem;
    }
    .li-rigth{
        width: 70%;
        height: 100%;
        /* background-color: bisque; */
        position: relative;
    }
    .li-rigth>h1{
        font-size: 0.14rem;
        padding-left: 0.15rem;
        margin-top: 0.155rem;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .li-rigth>p{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #bababa;
        padding-left: 0.15rem;
        margin-bottom: 0.425rem;
    }
    .li-rigth>span{
        color: #bababa;
        padding-left: 0.15rem;
    }
    .li-rigth>span>b{
        color: #e93340;
    }
    .li-rigth>a{
        display: inline-block;
        width: 0.7rem;
        height: 0.265rem;
        background-color: #e93340;
        border-radius: 100px;
        text-align: center;
        line-height: 0.265rem;
        color: white;
        position: absolute;
        right: 8%;
    }
    .sectionA{
        width: 100%;
        height: 4.35rem;
        background-color: #f5ffe9;
        overflow: auto;
        margin-top: 0.1rem;
    }
    .sectionA>ul{
        width: 12.91rem;
        height: 100%;
        background-color: white;
        border-radius: 10px;
        margin-left: 0.2rem;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
    .sectionA>ul>li{
        width: 1.165rem;
        height: 51%;
        /* background-color: aqua; */
        /* margin-left: 0.14rem; */
        padding-left: 0.14rem;
        padding-top: 0.2rem;
        border-bottom: 1px solid #bababa;
        position: relative;
    }
    .sectionA>ul>li>img{
        width: 0.775rem;
        height: 0.775rem;
        margin-left: 0.12rem;
        margin-bottom: 0.2rem;
    }
    .sectionA>ul>li>h1{
        font-size: 0.14rem;
        width: 100%;
        /* white-space: nowrap; */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sectionA>ul>li>p{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #bababa;
        margin-bottom: 0.1rem;
    }
    .sectionA>ul>li>span{
        color: #bababa;
    }
    .sectionA>ul>li>span>b{
        color: #e93340;
    }
    .sectionA>ul>li>a{
        display: inline-block;
        font-size: 0.16rem;
        width: 0.265rem;
        height: 0.265rem;
        background-color: #e93340;
        border-radius: 50%;
        text-align: center;
        line-height: 0.35rem;
        color: white;
        position: absolute;
        right: 8%;
    }
    .img1{
        width: 100%;
        margin-top: 0.1rem;
    }
    .img2{
        width: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 0.05rem;
    }
    .img2>img{
        width: 90%;
    }
    .bottom{
        width: 100%;
        height: 2.6rem;
        background: url(/image/Sort/19.jpg);
        background-size: 100%;
        position: relative;
    }
    .bottom>span{
        font-size: 0.2rem;
        color: #bababa;
        position: absolute;
        left: 10%;
        bottom: 5%;
    }
    .bottom>span>b{
        color: #e93340;
    }
    .bottom>a{
        display: inline-block;
        width: 1rem;
        height: 0.465rem;
        background-color: #e93340;
        color: white;
        font-size: 0.17rem;
        text-align: center;
        border-radius: 10px;
        line-height: 0.465rem;
        position: absolute;
        right: 10%;
        bottom: 2%;
    }
</style>